<template>
  <view class="code-k-div">
    <view class="code_bg" @click="handleMaskClose" />
    <view class="code-con">
      <view class="code-img">
        <view class="code-img-con">
          <!-- 拼图块 -->
          <view
            class="code-mask"
            :style="{ marginTop: yHeight + 2 + 'px', left: moveX + 'px' }"
            @touchstart="handleStart"
            @mousedown="handleStart"
            @touchmove.stop.prevent="handleMove"
            @mousemove.stop.prevent="handleMove"
            @touchend="handleEnd"
            @mouseup="handleEnd"
          >
            <image class="code-front-img" :src="frontimg" mode="widthFix" style="width:65px;height:65px;"></image>
          </view>
          <image class="code-back-img" :src="backimg" mode="widthFix" style="height:160px;"></image>
        </view>

        <view class="code-push">
          <text
            class="code-tip"
            :class="{
              'code-tip-green': tipType === 'success',
              'code-tip-red': tipType === 'error'
            }"
          >
            {{ tip }}
          </text>
          <text class="icon-login-bg" @click="handleRefresh">刷新</text>
        </view>
      </view>

      <!-- 滑块轨道 -->
      <view ref="wrapRef" class="code-btn">
        <view class="move-code" :style="{ width: moveX + 'px' }" />
        <view
          class="code-btn-img code-btn-m"
          :style="{ left: moveX + 'px' }"
          @touchstart="handleStart"
          @mousedown="handleStart"
          @touchmove.stop.prevent="handleMove"
          @mousemove.stop.prevent="handleMove"
          @touchend="handleEnd"
          @mouseup="handleEnd"
        />
      </view>

      <view class="code-span">按住左边滑块，拖动完成上方拼图</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SliderCaptcha',
  props: {
    frontimg: { type: String, default: '' },
    backimg: { type: String, default: '' },
    yHeight: { type: Number, default: 1 },
    maskclose: { type: Boolean, default: true },
    randNum: { type: Number, default: 0 },
    // onRefresh: { type: Function, default: () => {} },
    // onSuccess: { type: Function, default: () => {} },
    // onMoveEnd: { type: Function, default: () => {} },
    // onClose: { type: Function, default: () => {} }
  },
  data() {
    return {
      isDown: false,
      moveX: 0,
      tip: '',
      tipType: '',
      startX: 0,
      offsetX: 0,
      screenWidth: 0, // 屏幕宽度(px)
      pixelRatio: 1 // 像素比
    }
  },
  mounted() {
    // 初始化获取屏幕信息
    const systemInfo = uni.getSystemInfoSync()
    this.screenWidth = systemInfo.screenWidth
    this.pixelRatio = systemInfo.pixelRatio
  },
  watch: {
    randNum(newVal) {
      if (!newVal || newVal === 0) {
        this.tip = ''
        this.tipType = ''
        this.moveX = 0
        return
      }
      if (newVal.toString().length < 4) {
        this.tip = '验证失败'
        this.tipType = 'error'
        this.moveX = 0
      } else {
        this.tip = '验证通过'
        this.tipType = 'success'
		this.$emit('onSuccess')
        this.moveX = 0
      }
    }
  },
  methods: {
    handleStart(e) {
      this.tip = ''
      this.tipType = ''
      this.isDown = true
      
      // 直接使用px单位，无需转换
      const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
      this.startX = clientX
      this.offsetX = this.moveX
    },
    handleMove(e) {
      if (!this.isDown) return
      e.stopPropagation()
      e.preventDefault()
      
      // 直接使用px单位计算
      const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
      let dx = clientX - this.startX + this.offsetX
      // 限制滑动范围(原540rpx约等于270px)
      dx = Math.max(0, Math.min(dx, 270))
      this.moveX = dx
    },
    handleEnd() {
      if (!this.isDown) return
      this.isDown = false
	this.$emit('onMoveEnd',Math.floor(this.moveX - 15))
      // if (this.onMoveEnd) {
      //   this.onMoveEnd(Math.floor(this.moveX - 15)) // 原30rpx约等于15px
      // }
    },
    handleRefresh() {
      this.moveX = 0
      this.tip = ''
      this.tipType = ''
	  this.$emit('onRefresh')
    },
    handleMaskClose() {
      if (this.maskclose) {
		  this.$emit('onClose')
      }
    }
  }
}
</script>

<style scoped>
.code_bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 999;
}

.icon-login-bg {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid #3765ff;
  color: #3765ff;
  transition: all 0.2s;
}

.icon-login-bg:hover {
  background-color: #3765ff;
  color: #fff;
}

.code-con {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 1000;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  user-select: none;
  min-width: 320px;
}

.code-img {
  margin: 0;
  padding: 10px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.code-img image {
  display: block;
  border-radius: 6px;
}

.code-push {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
  padding: 0 10px;
}

.code-btn {
  position: relative;
  height: 36px;
  margin: 15px 10px;
  background-color: #f0f0f0;
  border-radius: 18px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  overflow: hidden;
}

.move-code {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  border-radius: 18px;
  background: linear-gradient(90deg, #7cd47e, #4caf50);
  transition: background 0.3s;
}

.code-btn-m {
  position: absolute;
  width: 36px;
  height: 36px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.1s;
}

.code-btn-m:active {
  transform: scale(0.95);
}

.code-btn-img {
  background-repeat: no-repeat;
  background-size: 60% auto;
  background-position: center;
}

.code-span {
  font-size: 14px;
  text-align: center;
  padding: 10px;
  color: #666;
}

.code-tip {
  font-size: 12px;
  padding-left: 10px;
}

.code-tip-red {
  color: #e74c3c;
}

.code-tip-green {
  color: #27ae60;
}

.code-img-con {
  position: relative;
}

.code-mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.code-back-img {
  user-select: none;
  display: block;
  border-radius: 6px;
  height: 160px;
}

.code-front-img {
  user-select: none;
  display: block;
  border-radius: 6px;
  width: 65px;
  height: 65px;
}
</style>